<template>
  <el-container>
    <el-container>
      <el-main>
        <!--<div class="title_box">-->
        <!--  <span class="title">学校公告</span>-->
        <!--</div>-->
        <div class="bs-sysMsg_box">
          <div class="bs-sysMsg" v-if="systemMsg.length > 0">
            <i class="el-alert__icon el-icon-warning"></i>
            <div class="msg__content">
              <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
                <el-carousel-item v-for="item in systemMsg" :key="item.id">
                  <span style="cursor: pointer;" @click="showNotifyContent(item)" class="item">{{item.title}}</span>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <!--img尺寸850*400-->
            <img :src="item.view" class="image" alt="">
          </el-carousel-item>
        </el-carousel>
        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="45%">
          <div class="notice_box">
            <el-row>
              <el-col>
                <el-card shadow="always">
                  <div class="title">
                    <span>{{title}}</span><br>
                  </div>
                  <div class="content">
                    {{content}}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {queryShowNotifyList} from "@/api/notify";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Index",
  data(){
    return{
      imgList: [
        /*{
          id:0,
          view:require('@/assets/img/1.png')
        },
        {
          id:1,
          view:require('@/assets/img/4.png')
        },
        {
          id:2,
          view:require('@/assets/img/3.png')
        },
        {
          id:3,
          view:require('@/assets/img/5.png')
        },*/
      ],
      // 滚屏消息
      systemMsg: [],
      dialogVisible: false,
      title: '',
      content: '',
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      queryShowNotifyList().then(res => {
        console.log(res);
        this.systemMsg = res.data
      })
    },
    showNotifyContent(item){
      this.title = item.title;
      this.content = item.content;
      this.dialogVisible = true;
    }
  }
}
</script>

<style lang="less" scoped>

.bs-sysMsg_box{
  width: 99%;
  height: 10%;
}

.el-carousel{
  width: 100%;
}

.title_box{
  margin-bottom: 20px;
  text-align: center;
  .title{
    font-family: 华文行楷,serif;
    font-weight: bold;
    border: solid 1px #eee;
    border-radius: 3%;
    padding: 5px;
    //外圈阴影
    box-shadow: 0 0 10px #ddd;
    color: gray;
    font-size: 40px;
  }
}

.notice_box{
  height: 38%;
  width: 100%;
  white-space:pre-wrap;
  .el-card{
    width: 100%;
    height: 100%;
    .title{
      font-weight: bolder;
      font-size: 25px;
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
    }
    .content{
      width: 100%;
      height: 100%;
      word-break: break-word;
      white-space: pre-line;
      font-weight: bold;
    }
  }
}

/*轮翻消息*/
.bs-sysMsg {
  position: relative;
  display: flex;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 2px;
  color: #e6a23c;
  background-color: #fdf6ec;
  overflow: hidden;
  opacity: 1;
  align-items: center;
  transition: opacity .2s;
}
.bs-sysMsg .msg__content {
  display: table-cell;
  padding: 0 8px;
  width: 100%;
}
.bs-sysMsg .msg__content a.item {
  color: #e6a23c;
  font-size: 14px;
  opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover{text-decoration: underline;}
</style>
